<template>
  <!-- 标签库 -->
  <div class="body_all">
    <div class="ba_top">
      <div>
        <el-select
          v-model="labelSearch"
          clearable
          placeholder="标签组"
          size="mini"
        >
          <el-option
            v-for="item in labelList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button
          style="margin-left: 8px"
          type="primary"
          icon="el-icon-search"
          @click="getData"
          size="mini"
          >搜索</el-button
        >
        <el-button
          type="refresh"
          icon="el-icon-refresh"
          @click="btnRefresh"
          size="mini"
          >重置</el-button
        >
        <el-button
          icon="el-icon-refresh"
          @click="synchronization"
          size="mini"
          :disabled="!synchronizationStart"
          >同步标签库</el-button
        >
      </div>
    </div>
    <div class="ba_main">
      <div>
        <el-container
          style="border-right: 1px solid #eee; border-top: 1px solid #eee"
        >
          <el-aside width="200px">
            <el-menu ref="elMenu" :default-openeds="['1']">
              <el-submenu index="1">
                <template slot="title">
                  <div style="display: flex; align-items: center">
                    <!-- <i class="el-icon-plus" @click.stop="addGroup(0)"></i> -->
                    <span title="标签组名称" class="textHid"> 标签组名称 </span>
                  </div>
                </template>
                <el-menu-item
                  v-for="(itemUser, i) in tableData"
                  :key="i"
                  :index="'' + i"
                  @click="demSel(i, itemUser.id)"
                  >{{ itemUser.group_name }}</el-menu-item
                >
              </el-submenu>
            </el-menu>
          </el-aside>

          <el-container>
            <el-main style="margin-left: 15px">
              <!-- <div style="margin-top: 15px">
                <el-button
                  type="primary"
                  class="el-icon-plus"
                  size="mini"
                  @click="addGroup(1)"
                  >新增标签</el-button
                >
              </div> -->
              <el-table
                :data="tableData_bq"
                v-loading="loading"
                style="width: auto"
              >
                <el-table-column prop="name" label="标签名称">
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间">
                </el-table-column>
                <el-table-column prop="order" label="序号" width="150">
                </el-table-column>
                <!-- <el-table-column label="操作" width="100" flex="right">
                  <template slot-scope="scope">
                    <span class="edit_btn" @click="editerData(scope.row)"
                      >编辑</span
                    >
                    <span
                      class="edit_btn"
                      style="margin-left: 10px"
                      @click="delData(scope.row)"
                      >删除</span
                    >
                  </template>
                </el-table-column> -->
              </el-table>
            </el-main>
          </el-container>
        </el-container>
      </div>
      <!-- <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'tag', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="group_name" label="标签组名称">
        </el-table-column>
        <el-table-column prop="name" label="标签名称">
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间">
        </el-table-column>
        <el-table-column prop="order" label="序号" orderable>
        </el-table-column>
      </el-table> -->
    </div>
    <el-dialog :title="addtitle" :visible.sync="editerlabel" width="45%">
      <el-form
        label-width="80px"
        class="demo-ruleForm"
        :model="labelData"
        ref="labelData"
        :rules="rules"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="labelData.name"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="order">
          <el-input v-model="labelData.order"></el-input>
        </el-form-item>
      </el-form>
      <div class="foot_btn">
        <el-button @click="resetForm('labelData')">取 消</el-button>
        <el-button type="primary" @click="submitForm('labelData')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      synchronizationStart: true,
      editerlabel: false, // 标签对话框状态
      addtitle: "",
      labelData: {
        id: "",
        gid: "",
        name: "",
        order: 1,
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        order: [{ required: true, message: "请输入序号", trigger: "blur" }],
      },
      // 标签组检索条件
      labelList: [],
      // 搜索条件
      labelSearch: "",
      groupKey: "", // 选择的标签组
      tableData: [],
      tableData_bq: [],
    };
  },
  created() {
    this.loading = true;
    this.getData();
  },
  methods: {
    // 获取列表数据
    getData() {
      let that = this;
      this.$cmsapi.labelLibraryList(that.labelSearch).then(
        (res) => {
          if (res.code == 0) {
            that.tableData = res.data;
            console.log(that.tableData)
            that.labelList = that.$options.data().labelList;
            for (let i = 0; i < that.tableData.length; i++) {
              that.tableData[i].id = i.toString();
              let param = {
                label: that.tableData[i].group_name,
                value: that.tableData[i].group_id,
              };
              that.labelList.push(param);
            }
            this.tableData_bq = res.data[0].tag;
          } else {
            that.$message.error(res.msg);
          }
          that.loading = false;
        },
        (err) => {
          console.log(err);
          that.loading = false;
        }
      );
    },
    // 切换数据
    demSel(index, key) {
      this.tableData_bq = this.tableData[index].tag;
      this.groupKey = key;
    },
    // 条件重置
    btnRefresh() {
      this.loading = true;
      this.labelSearch = this.$options.data().labelSearch;
      this.getData();
    },
    // 新增标签组
    addGroup(type) {
      if (type == 0) {
        // 新增标签组
        this.addtitle = "新增标签组";
      } else {
        // 新增标签
        this.addtitle = "新增标签";
        this.labelData = this.$options.data().labelData;
        this.labelData.gid = this.groupKey;
      }
      this.editerlabel = true;
    },
    // 编辑标签
    editerData(obj) {
      this.addtitle = "编辑标签";
      this.labelData = obj;
      this.editerlabel = true;
    },
    // 删除标签
    delData(obj){
      let param = {
        tag_id:obj.id,
        group_id:obj.group_id
      }
      this.$cmsapi.delCorpTag(param).then(res => {
        if(res.code == 0) {
          this.$message({
            type:"success",
            message:"删除成功"
          })
        } else {
          this.$message.error(res.msg);
        }
        this.getData();
      }, err => {console.log(err)})
    },
    // 标签提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.labelData.gid !== "") {
            // 新增编辑标签组
            this.$cmsapi.addCorpTagGroup(this.labelData).then(
              (res) => {
                if (res.code == 0) {
                  this.$message({
                    type: "success",
                    message: "操作成功",
                  });
                  this.labelData = this.$options.data().labelData;
                  this.getData();
                } else {
                  this.$message.error(res.msg);
                }
                this.editerlabel = false;
              },
              (err) => {
                console.log(err);
              }
            );
          } else {
            // 新增编辑标签
            this.$cmsapi.addCorpTag(this.labelData).then(
              (res) => {
                if (res.code == 0) {
                  this.$message({
                    type: "success",
                    message: "操作成功",
                  });
                  this.labelData = this.$options.data().labelData;
                  this.getData();
                } else {
                  this.$message.error(res.msg);
                }
                this.editerlabel = false;
              },
              (err) => {
                console.log(err);
              }
            );
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 取消-标签
    resetForm(formName) {
      this.labelData = this.$options.data().labelData;
      this.$refs[formName].resetFields();
      this.editerlabel = false;
    },
    // 同步标签库
    synchronization() {
      this.synchronizationStart = false;
      this.loading = true;
      this.$cmsapi.labelLibrarySy().then(
        (res) => {
          if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: "success",
            });
          } else {
            this.$message.error(res.msg);
          }
          this.getData();
          this.synchronizationStart = true;
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
};
</script>